<template>
  <div class="sidebar-layers">
    <ul>
      <li
        v-for="(item, key) in comList"
        :key="key"
        class="flex justify-between px-4 cursor-pointer items-center text-nowrap"
        :class="{ active: selectSet.has(item.id) }"
        @mousedown="selectItem(item)"
        @mouseenter="item.showIcon = true"
        @mouseleave="item.showIcon = false"
      >
        <div v-if="item.type === 'd-text'">{{ item.text }}</div>
        <div v-else>
          {{ item.type }}
        </div>
        <div v-show="item.showIcon" class="flex items-center gap-2">
          <IconUp :v-show="getMaxIndex() !== item.z" @click="moveUp(item.z)"></IconUp>
          <IconDown @click="moveDown(item.z)"> </IconDown>

          <IconEye @click="toggleById(item.id)"></IconEye>
          <IconDelete @click="deleteShapeById(item.id)"></IconDelete>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { IShapeProps } from "@/interface/IShape";
import {
  deleteShapeById,
  getMaxIndex,
  moveDown,
  moveUp,
  toggleById
} from "@/store/events/shape.actions";
import { addIdInSet, selectSet } from "@/views/paint/modules/data/shapes";
import { currentStage } from "@/views/paint/modules/data/stage";

/* 从外部引入  */

/**
 * 注释: 选择图层时触发，点击需要激活对应的组件
 *
 * */
type ShapeConfigType = IShapeProps & { [key: string]: any };
const selectItem = (item: ShapeConfigType) => {
  addIdInSet(item);
};

const comList = computed(() => {
  return currentStage.value.components;
});
</script>

<style lang="scss" scoped>
.sidebar-layers {
  ul {
    height: calc(100vh - 72px);
    overflow-y: auto;
  }
  li {
    line-height: 32px;
    border: 1px solid transparent;
    margin-bottom: 1px;
    color: var(--color-text-1);
    background: var(--color-bg-3);
    &:hover {
      border: 1px solid var(--primary);
    }
  }
  li.active {
    color: var(--color-text-1);
    background: var(--color-primary-light-2);
    border: 1px solid transparent;
  }
}
</style>
